<!-- 入炉来煤皮带秤记录 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'


//table设置
const tableHeight = ref(0)
const listTableData = ref<any>([])

// 定义表格数据的类型
interface TableRow {
  id: number;
  time: string;
  name: string;
  name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));

    console.log('ids',selectedRowIds)
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
    return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};


const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}

// 时间下拉框
const shortcuts = [
    {
        text: '近3天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            return [start, end]
        },
    },
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },

]

const infoDialogVisible = ref(false)

import { MultibeltRecordList, MultibeltRecordDetail, delMultibeltRecord,QueryAllMultibeltMsg } from "@/api";

// 下拉框
const selectData = ref<any>([])
const getQueryAllMultibeltMsg = () => {
    QueryAllMultibeltMsg().then(res=>{
        console.log('下拉框-------',res.data)
        selectData.value = res.data
    })
}

// 搜索
const searchForm = ref({
    MultibeltNo: '',
    MultibeltName: '',

    BeginStartReadTime:'',
    EndStartReadTime:'',

    DataType: 1,
    searchFormTime: [],

    PageNum: 1, //当前页码
    PageSize: 10 //PageSize
})

function changeSearchTime(e: any) {
    searchForm.value.BeginStartReadTime = e[0]
    searchForm.value.EndStartReadTime = e[1]
    //console.log(searchForm)
}

const totalPage = ref(0)

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    searchForm.value.BeginStartReadTime = ''
    searchForm.value.EndStartReadTime = ''
    // searchForm.value.PageNum = 1
    postMultibeltRecordList()
}

//list
const postMultibeltRecordList = () => {
    console.log('searchForm-------',searchForm.value)
    MultibeltRecordList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

// 详情 
const infoData = ref<any>({})
const getMultibeltRecordDetail = (id:number) => {
    MultibeltRecordDetail(id).then(res=>{
        console.log('详情----',res.data)
        infoData.value = res.data
        infoDialogVisible.value = true
    })
}

// 删除
const clickDelMultibeltRecord = (id:any) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delMultibeltRecord(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postMultibeltRecordList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
}









onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 278;

    postMultibeltRecordList()
    getQueryAllMultibeltMsg()
});


</script>
<template>
    <!-- 弹出框 -->
    <!-- 弹出框/详情 -->
    <el-dialog v-model="infoDialogVisible" title="查看皮带秤详情" width="900" :align-center="true">
        <div class="dialog_main">
            <ul class="edit_info mt15">
                <li>
                    <span>皮带秤编号:</span>
                    <p>{{ infoData.multibeltNo }}</p>
                </li>
                <li>
                    <span>皮带秤名称:</span>
                    <p>{{ infoData.multibeltName }}</p>
                </li>
                <li>
                    <span>皮带秤方向:</span>
                    <p v-if="infoData.direction == 0">入</p>
                    <p v-if="infoData.direction == 1">出</p>
                </li>
                <li>
                    <span>来煤批次编号:</span>
                    <p><a href="#" class="links">{{ infoData.secondCode }}</a></p>
                </li>
            </ul>
            <div class="form_title">读数</div>

            <div class="table_info small">
                <table>
                    <colgroup>
                        <col width="25%">
                        <col width="35%">
                        <col width="40%">
                    </colgroup>
                    <tr>
                        <th rowspan="2">开始读数</th>
                        <th>开始读数时间</th>
                        <td>{{ infoData.startReadTime }}</td>
                    </tr>
                    <tr>
                        <th>开始读数数值</th>
                        <td>{{ infoData.startReadNum }}(吨)</td>
                    </tr>
                    <tr>
                        <th rowspan="2">结束读数</th>
                        <th>结束读数时间</th>
                        <td>{{ infoData.endReadTime }}</td>
                    </tr>
                    <tr>
                        <th>结束读数数值</th>
                        <td>{{ infoData.endReadNum }}(吨)</td>
                    </tr>
                    <tr>
                        <th rowspan="2">本次结果</th>
                        <th>读数耗时</th>
                        <td>{{ infoData.readSeconds }}(分)</td>
                    </tr>
                    <tr>
                        <th>重量</th>
                        <td>{{ infoData.weight }}(吨)</td>
                    </tr>
                    <tr>
                        <th colspan="2">诊断预测</th>
                        <td><p class="green" v-if="infoData.status == 1">运行正常</p>
                            <p class="red" v-if="infoData.status == 0">运行异常</p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- search -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="auto">
            <el-form-item label="皮带秤编号:" prop="MultibeltNo">
                <el-select v-model="searchForm.MultibeltNo" placeholder="请选择">
                    <el-option v-for="item in selectData" :label="item.multibeltNo" :value="item.multibeltNo" />
                </el-select>
            </el-form-item>
            <el-form-item label="皮带秤名称:" prop="MultibeltName">
                <el-select v-model="searchForm.MultibeltName" placeholder="请选择">
                    <el-option v-for="item in selectData" :label="item.multibeltName" :value="item.multibeltName" />
                </el-select>
            </el-form-item>
            
            <el-form-item label="皮带秤读数时间段:" prop="searchFormTime">
                <el-date-picker style="width: 240px;" v-model="searchForm.searchFormTime" 
                type="daterange" 
                value-format="YYYY-MM-DD" 
                :shortcuts="shortcuts" 
                unlink-panels 
                start-placeholder="开始时间"
                end-placeholder="结束时间" 
                @change="changeSearchTime" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="postMultibeltRecordList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <!-- <div class="record_set">
            <el-button type="primary" color="#2565C8" >新增</el-button>
        </div> -->
        <div class="table_list mt15">
            <el-table class="custom-table" 
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column label="皮带秤编号" prop="multibeltNo" />
                <el-table-column label="皮带秤名称" prop="multibeltName" />
                <el-table-column label="开始读数" prop="startReadNum" />
                <el-table-column label="结束读数" prop="endReadNum" />
                <el-table-column label="重量" prop="weight" />
                <el-table-column label="皮带秤方向" prop="direction" >
                    <template #default="scope">
                        <span v-if="scope.row.direction == 0">入</span>
                        <span v-if="scope.row.direction == 1">出</span>
                    </template>
                </el-table-column>
                <el-table-column label="来煤批次编号" prop="secondCode" >
                    <template #default="scope">
                        <a href="javascript:;" class="links">{{ scope.row.secondCode }}</a>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="120">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelMultibeltRecord(scope.row.id)">删除</a>
                            <a href="javascript:;" @click="getMultibeltRecordDetail(scope.row.id)">查看详情</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="postMultibeltRecordList" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>
    
</template>
<style scoped lang="scss">
::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>